﻿

<style>
	/*.col-md-10 {*/
	/*	flex: 0 0 70.333333%;*/
	/*	max-width: 70.333333%;*/
	/*}*/

	/*.col-md-2 {*/
	/*	flex: 0 0 25.666667%;*/
	/*	max-width: 25.666667%;*/
	/*}*/
</style>

<div class="row">
	<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="add-group">
			<a class="ad-btn" data-toggle="modal" data-target="#exampleModalLong" @click="openAdd">添加</a>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >项目名称：</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="project.name" placeholder="请输入地区">
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >排序字段：</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="project.orders" placeholder="请输入排序">
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>
				<button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


<!-- Products view Start -->
<div class="row">
	<!-- Styled Table Card-->
	<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="card table-card">
			<div class="card-body">
				<table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
					<thead style="font-size:25px">
					<tr align="center">
						<th>序号</th>
						<th>项目名称</th>
						<th>排序字段</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr v-for="(project,index) in projectList" align="center">
						<td style="font-size:25px">{{index+1}}</td>
						<td style="font-size:25px">{{project.name}}</td>
						<td style="font-size:25px">{{project.orders}}</td>
						<td style="font-size:25px;color: red;" v-if="project.status==1">待开启</td>
						<td style="font-size:25px;color: blue;" v-if="project.status==2">开启中</td>
						<td>
							<div style="width:300px">
								<button type="button" class="btn btn-success mt-2 mr-2"
										@click="openEdit(project.id)"
										v-if="project.status==1"
										data-toggle="modal" data-target="#exampleModalLong"
								>修改</button>
								<button type="button" class="btn btn-light mt-2 mr-2"
										v-if="project.status==2"
								>修改</button>
								<button type="button" class="btn btn-success mt-2 mr-2"
										v-if="project.status==1"
										@click="updateStatus(project.id,'2')">开启</button>
								<button type="button" class="btn btn-light mt-2 mr-2"
										v-if="project.status==2"
										>已开启</button>
							</div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<script>

	new Vue({
		el:"#app",
		data:{
			projectList:[],
			modalTitle: '',
			project: {'id':'','name':''}
		},
		created:function (){
			this.selectList()
		},
		methods:{
			selectList:function () {
				axios.get(
						"/admin/project/getList"
				).then(response=>{
					this.projectList = response.data
				})
			},
			openEdit:function(id){
				this.modalTitle = "修改"
				this.project = {}
				axios.get(
						"/admin/project/findById/"+id,
				).then(response=>{
					this.project = response.data
					console.log(this.project)
				})
			},
			openAdd:function(){
				this.modalTitle = "添加"
				this.project = {}
			},
			saveOrUpdate:function (){
				axios.post("/admin/project/saveOrUpdate",this.project).then(response=>{
					$("#closeModal").click()
					this.selectList()
				})
			},
			updateStatus:function (id,status){
				axios.get("/admin/project/updateStatus/"+id+"/"+status).then(response=>{
					this.selectList()
				})
			}
		}
	});

</script>

